<template>
  <wd-config-provider :theme="themeValue" :theme-vars="themeVars" class="outerBox">
  <wd-fab :draggable="true" position="right-bottom" :expandable="false" :gap='{ top: 56, left: 4, right: 4, bottom: 56 }'>
    <template #trigger>
      <view :class="['fabCustom ', themeValue === 'dark' ? 'toSun' : 'toNight']">
        <view :class="['icon iconfont ', themeValue === 'dark' ? 'icon-rijianmoshi' : 'icon-yejianmoshi-']" @click="changeTheme()" style="font-size: 26px"></view>
      </view>
    </template>
  </wd-fab>
	<slot></slot>
  </wd-config-provider>
</template>

<script>
  import { ref, reactive } from 'vue'
  import { useMainStore } from '@/common/jone-store.js'
  export default {
    setup() {
      // themeVars 内的值会被转换成对应 CSS 变量
      // 比如 buttonPrimaryBg 会转换成 `--wot-button-primary-bg-color`
      const themeVars = reactive({})
      const themeValue = ref('')
      // 修改主题模式
      const store = useMainStore()
      themeValue.value = store.systemTheme
      console.log(store.systemTheme)
      const changeTheme = (val) => {
        if(val !== 'firstLoad'){
          themeValue.value = store.systemTheme === 'light' ? 'dark' : 'light'
          store.increment(themeValue.value)
        }
        if(themeValue.value === 'light'){
            themeVars.colorTheme = '#6A1B9A',
            // colorTheme: '#6A1B9A',
            themeVars.colorWhite = '#fff',
            themeVars.colorBlack = '#000',
            themeVars.buttonPrimaryBgColor = '#6A1B9A',
            themeVars.buttonPrimaryColor = '#fff',
            themeVars.colorSuccess = '#39ec10',
            themeVars.colorWarning = '#F9A825',
            themeVars.colorDanger = '#FF1744',
            themeVars.darkBackground = 'rgb(28, 28, 28)',
            themeVars.darkBackground = 'rgb(28, 28, 28)'
        }else{
          //
          themeVars.colorTheme = '#2962FF',
          // colorTheme: '#2962FF',
          themeVars.colorWhite = '#fff',
          themeVars.colorBlack = '#000',
          themeVars.buttonPrimaryBgColor = '#2962FF',
          themeVars.buttonPrimaryColor = '#fff',
          themeVars.colorSuccess = '#1B5E20',
          themeVars.colorWarning = '#F57F17',
          themeVars.colorDanger = '#B71C1C',
          themeVars.darkBackground = 'rgb(28, 28, 28)',
          themeVars.darkBackground = 'rgb(28, 28, 28)'
        }
      }
      changeTheme('firstLoad')
      return {
        themeVars,
        themeValue,
        changeTheme
      }
    }
  }
</script>

<style lang='scss'>
  @import '@/static/css/iconfont/iconfont.css';
  @import '@/static/css/index.scss';
  .outerBox{
	height: 100vh;
	overflow: auto;
  background: #f5f5f5;
  }
  .wot-theme-dark .wd-navbar{
	  background: pink;
  }
  .wot-theme-dark {
    color: #f5f5f5;
    background-color: rgb(0,0,0);
  }
  .wot-theme-dark .wd-navbar.is-border::after{
    background: rgb(44, 44, 44) !important;
  }
  .fabCustom{
    background: pink;
    padding: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
  }
  .toSun{
    background: $toSun-bg-color;
    color: $toSun-color;
  }
  .toNight{
    background: $toNight-bg-color;
    color: $toNight-color;
  }
  .wd-tabbar{
		bottom: 10px !important;
		backdrop-filter: blur(10px) !important;
		background: rgba(255, 255, 255, 0.5) !important;
		font-weight: 600 !important;
	}
  .wot-theme-dark .wd-tabbar{
		background: rgba(44, 44, 44, 0.5) !important;
  }
</style>
  